<template>
  <el-card style="width: 85rem; height: 65rem; margin:2rem auto 0px;">
    <div style="font-size: 20px;color: black; margin-bottom: 20px;">
      <button style="width: 7px; height: 20px; border-radius: 3px; background-color: rgb(41, 132, 248); border-width: 0; padding: 0"></button>
      <span style="margin-left: 10px;">居民详情</span>
    </div>

    <hr>

    <div style="font-size: 18px;color: black; font-weight: 450; margin-bottom: 20px;">
      <span>居民信息</span>
    </div>

    <el-form label-width="80px" label-position="left" :inline="true">
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="姓名">
            <el-text class="mx-1" size="large">{{residentForm.name}}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="身份证号">
            <el-text class="mx-1" size="large">{{residentForm.IDCard}}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="性别">
            <el-text class="mx-1" size="large">{{residentForm.gender}}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="年龄">
            <el-text class="mx-1" size="large">{{residentForm.age}}</el-text>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="手机号码">
            <el-text class="mx-1" size="large">{{residentForm.phoneNumber}}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="出生日期">
            <el-text class="mx-1" size="large">{{residentForm.birthDate}}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="签约状态">
            <el-text v-if="residentForm.status == 1" class="mx-1" size="large" style="color: rgb(40, 208, 148)">{{'签约中'}}</el-text>
            <el-text v-else class="mx-1" size="large" style="color: rgb(40, 208, 148)">{{'未签约'}}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="6">
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="现居地">
            <el-text class="mx-1" size="large">{{residentForm.address}}</el-text>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="居民标签">
            <el-button v-for="(item,index) in residentForm.disease"
                       :style="{
                          width: '70px',
                          height: '30px',
                          color: getFontColor(index),
                          backgroundColor: getBackgroundColor(index),
                          borderRadius: '5px',
                          border: '0',
                          cursor: 'default'
                       }">{{ item }}</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="家庭成员">
            <el-card v-for="item in relationship" style="width: 220px; height: 90px; margin-right: 30px; position: relative;">
              <img v-if="item.gender==1" src="/img/common/male.png" alt="" width="50px" height=50px style="position: relative; bottom: 8px">
              <img v-else src="/img/common/female.jpg" alt="" width="50px" height=50px style="position: relative; bottom: 8px">
              <div style="width: 100px; height: 50px; color: #999999; margin-left: 15px; display: inline-block; position: relative; bottom: 5px">
                <span style="font-size: 18px; color: black;">{{ item.name }}</span>
                &nbsp;
                <span>{{ item.age }}岁</span>
                <div>
                  <span>关系：</span>
                  <span>{{ item.relation }}</span>
                </div>
              </div>
              <img src="/img/common/tip.png" alt="" style="transform: rotate(-25deg); position: absolute; top: 25px">
            </el-card>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <hr>

    <div style="font-size: 18px;color: black; font-weight: 450; margin-bottom: 30px;">
      <span>签约信息</span>
    </div>
    <el-table :data="SigningArr ? SigningArr : null" ref="tableRef" style="width: 100%;" height=350px
              :header-cell-style="{ textAlign: 'center', background: 'rgb(249,249,249)', height: '55px', color: 'rgb(51,51,51)', fontWeight: '200'}"
              :row-style="{ height:'60px' }"
              :cell-style="{ textAlign: 'center', padding:'0px' }"
              :row-class-name="setTableRow"
              :cell-class-name="cellStyle">
      <el-table-column prop="signedContractId" label="编号" :width="flexColumnWidth('signedContractId',SigningArr)"/>
      <el-table-column prop="name" label="签约人姓名" :width="flexColumnWidth('name',SigningArr)"  />
      <el-table-column prop="idcard" label="身份证号" :width="flexColumnWidth('idcard',SigningArr)"/>
      <el-table-column prop="phone" label="手机号码" :width="flexColumnWidth('phone',SigningArr)"/>
      <el-table-column prop="status" label="签约状态" :width="flexColumnWidth('status',SigningArr)"/>
      <el-table-column prop="doctorId" label="签约医生"  :formatter="doctorFormatter"/>
      <el-table-column prop="serviceItemsId" label="签约服务" :formatter="itemsFormatter"/>
      <el-table-column prop="updateTime" label="最后修改时间" :width="flexColumnWidth('updateTime',SigningArr)"/>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="toDetail(scope.$index)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <el-button type="primary" @click="edit" style="width: 130px; height: 40px; font-size: 15px;">编辑档案信息</el-button>
      <el-button @click="router.push('/resident')" style="width: 70px; height: 40px; font-size: 15px;">返回</el-button>
    </template>
  </el-card>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import qs from "qs";
import {ElMessage} from "element-plus";
import router from "@/router";

const doctorArr = ref([]);
const serviceItemsArr = ref([]);
onMounted(() => {
  loadData(doctorArr,'user');
  loadData(serviceItemsArr,'items');
});
const doctorFormatter = (row,column,cellValue,index)=>{
  if(!doctorArr.value){
    return cellValue;
  }
  for(let item of doctorArr.value) {
    if (item.id == cellValue) {
      cellValue = item.doctorName;
    }
  }
  return cellValue;
}

const itemsFormatter = (row,column,cellValue,index)=>{
  if(!serviceItemsArr.value){
    return cellValue;
  }
  for(let item of serviceItemsArr.value) {
    if (item.id == cellValue) {
      cellValue = item.name;
    }
  }
  return cellValue;
}

let residentId = '';
const residentForm = ref({});
const relationship = ref([]);
const isLoaded = ref(false);
const SigningArr = ref([]);

onMounted(() => {
  residentId = new URLSearchParams(window.location.search).get('id');
  axios.get(BASE_URL + '/hhmc/patient/select/'+residentId).then((response) => {
    if (response.data.code == 2000) {
      residentForm.value = response.data.data;
    } else {
      ElMessage.error(response.data.msg);
    }
  })

  axios.get(BASE_URL + '/hhmc/patient/getFamilyInfo/'+residentId).then((response) => {
    if (response.data.code == 2000) {
      relationship.value = response.data.data;
    } else {
      ElMessage.error(response.data.msg);
    }
  })

  const searchSigningForm = ref({patient: residentId});
  let data = qs.stringify(searchSigningForm.value);
  axios.get(BASE_URL+'/hhmc/sign/select?' + data).then((response)=>{
    if(response.data.code == 2000){
      SigningArr.value = response.data.data;
    }else{
      ElMessage.error(response.data.msg);
    }
  })
  // isLoaded.value = false;
  // axios.get(BASE_URL+'/hhmc/sign/list/').then((response)=>{
  //   if(response.data.code==2000){
  //     InfoArr.value = response.data.data;
  //   }else{
  //     ElMessage.error(response.data.msg);
  //   }
  // isLoaded.value = true;
  // })
});

const toDetail = (id) => {
  router.push('/signingDetail?id=' + SigningArr.value[id].id)
};

const edit = ()=> {
  router.push('/editResident?id='+residentId)
}

const getBackgroundColor = (index)=> {
  switch (index % 3) {
    case 0:
      return 'rgb(255, 241, 240)';
    case 1:
      return 'rgb(241, 242, 254)';
    case 2:
      return 'rgb(236, 251, 246)';
  }
}
const getFontColor = (index)=> {
  switch (index % 3) {
    case 0:
      return 'rgb(250, 116, 107)';
    case 1:
      return 'rgb(121, 126, 244)';
    case 2:
      return 'rgb(61, 212, 167)';
  }
}

const setTableRow = (row) => {
  if (row.rowIndex % 2 == 0) {
    return 'j-row';
  } else {
    return 'o-row';
  }
  return '';
}

const cellStyle = (row, column, rowIndex, columnIndex) => {
  if (row.column.property == 'status') {
    if (row.row.status == '待审核') {
      return "cell_success";
    }
    else if (row.row.status == '待支付') {
      return "cell_process";
    }
    else if (row.row.status == '已驳回') {
      return "cell_fail";
    }
    else if (row.row.status == '已完成') {
      return "cell_over";
    }
  }
  return "";
}
</script>

<style scoped>
hr {
  background-color: rgb(242,247,251);
  height:1px;
  border:none;
  margin-bottom: 20px
}

:deep(.el-form-item__label) {
  height: 45px;
  line-height: 45px;
  color: #999999;
  font-size: 15px;
}

.red-star {
  color: red;
  font-size: 16px;
  font-weight: 300;
  margin-left: 1px;
}

:deep(.el-table) {
  background: white;
  .j-row {
    background: white;
  }
  .o-row {
    background: rgb(242,247,251);
  }
  .cell_success {
    color: rgb(117,281,187);
  }
  .cell_process {
    color: rgb(253, 247, 128);
  }
  .cell_fail {
    color: rgb(249,116,149);
  }
  .cell_over {
    color: rgb(122, 255, 117);
  }
}
</style>